<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery.js"></script>
    <link rel="stylesheet" href="./random.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body style="font-family: Microsoft YaHei;">
<div class="a" id="col1">
    <div class="b">
        <div class="c" style="float: left;">

        </div>
        <div style="float: left; width:60%;height: 22%;background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#e6e6e6), to(#dfdfe1));background:-moz-linear-gradient(top, #e6e6e6, #dfdfe1);border-top: 2px solid #fbfbfb;border-bottom: 2px solid #bdbdbd;">
            <h4 style="color: #666666; text-shadow:0 1px 1px rgba(255,255,255,1), 0 -1px 1px rgba(189, 189, 189, 0.69);"><b>输入名字加空格进行随机排序</b>
                <p style=" margin-top:5%;color: #666666; text-shadow:0 1px 1px rgba(255,255,255,1), 0 -1px 1px rgba(189, 189, 189, 0.69);">例:张三 李四 王五</p></h4>
        </div>
        <div style="float: left;width: 20%; height: 22%;border-top-right-radius:20% ;background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#e6e6e6), to(#dfdfe1));background:-moz-linear-gradient(top, #e6e6e6, #dfdfe1);border-top: 2px solid #fbfbfb;border-bottom: 2px solid #bdbdbd;">

        </div>
        <h3>&nbsp;</h3>
        <input class="span12" id="dd" type="text"  value="" placeholder="在此输入" style="font-size: 16px;width: 64% !important;">

        <div style="width:64%;height: 34%;border:1px solid #d4d4d4;text-align: center;margin-top: 4%; margin-left: 18%;box-shadow: #c6c6c6 0px 1px 1px inset;">
            <textarea id="pp" class="pp" style="width:100%;height:100%;font-size: 120%;color: #707070">排序结果</textarea>
        </div>

        <div style="margin-top: 4%;">
            <button class="btn"  onclick="fun()" style="width:31.5% !important;background-color: transparent !important;margin-top: -0.5%;border: 1px solid #afafaf;">开始排序</button>
            <button class="btn"  onclick="window.hidden()" style="width:31.5% !important;background-color: transparent !important;margin-top: -0.5%;border: 1px solid #b8b8b8;">清空记录</button>
        </div>
    </div>
</div>
</body>
<script>

    function fun() {
        var string = document.getElementById("dd").value;//原始数据
        var array = string.split(" "); //转化为数组
        var l=array.length;
        $(".pp").empty();
        for(i=0;i<l;i++){
            n=Math.floor(Math.random() * (array.length));
            $(".pp").append(array[n]+" ");//随机选取
            array.splice(n,1);
        }
    }

    function hidden(){
        document.getElementById("dd").value="";
        document.getElementById("pp").innerHTML ="";
    }

    total = document.documentElement.clientHeight;
    colHeight = total-document.getElementById("col1").offsetTop;
    document.getElementById("col1").style.height=colHeight+"px";
</script>
</html>